<template>
  <div class="employees">
    <!-- 工具栏 -->
    <pagetools>
      <template #right>
        <el-button
          type="primary"
          :disabled="'employees-import' | btnper"
          @click="$router.push('/employees/import')"
          >导入</el-button
        >
        <el-button type="primary" @click="showDailog = true"
          >+ 新增员工</el-button
        >
      </template>
    </pagetools>
    <el-card class="mycard">
      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          type="index"
          fixed="left"
          label="序号"
          width="80"
        ></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="{ row }">
            <img
              @click="showCode(row.staffPhoto)"
              v-errimage="require('@/assets/common/bigUserHeader.png')"
              class="staffPhoto"
              :src="row.staffPhoto"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="workNumber" label="工号"> </el-table-column>
        <el-table-column label="聘用形式">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | turnHireType }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门"> </el-table-column>
        <el-table-column label="入职时间" width="200">
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | timeformat }}
          </template>
        </el-table-column>
        <el-table-column label="是否在职">
          <template>在职</template>
        </el-table-column>
        <el-table-column label="状态">
          <template>可用</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="{ row }">
            <el-button @click="toDetail(row.id)" type="text">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button @click="openRole(row.id)" type="text">角色</el-button>
            <el-button :disabled="'employees-delete' | btnper" type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pagesizes"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
    <!-- 显示新增面板  -->
    <add :showDailog.sync="showDailog" @updatedata="getEmpList"></add>
    <!-- 显示二维码的面板 -->
    <el-dialog title="图片二维码" :visible.sync="isVisible">
      <canvas ref="mycanvas"></canvas>
    </el-dialog>
    <!-- 显示分配角色的面板 -->
    <el-dialog title="分配角色" :visible.sync="roleDialog">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" style="text-align: center">
        <el-button @click="submit" type="primary">确定</el-button>
        <el-button @click="roleDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QrCode from 'qrcode'
// 导入新增组件
import add from './components/add.vue'
// 导入员工操作的操作
import {
  getEmpListApi,
  getUserInfoApi,
  sysUserAssignRolesApi
} from '@/api/employees.js'
// 导入角色操作的接口
import { getRoleListApi } from '@/api/role.js'
// 导入枚举
// import employees from '@/utils/constant/employees.js'
export default {
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      page: {
        currentPage: 1, // 当前页
        pagesizes: [5, 10, 15, 20], // 页容量集合
        pagesize: 5, // 页容量
        total: 0 // 总数量
      },
      showDailog: false,
      // 控制二维码面板的显示与隐藏
      isVisible: false,
      // 控制角色面板的显示与隐藏
      roleDialog: false,
      // 多选框的结果（数组）
      checkList: [],
      // 保存角色列表
      roleList: [],
      // 当前操作的用户 id
      userId: ''
    }
  },
  methods: {
    // 修改员工的角色
    async submit () {
      await sysUserAssignRolesApi({
        id: this.userId, // 修改角色的员工 id
        roleIds: this.checkList // 选中角色的 id 列表
      })
      // 提示成功
      this.$message.success('修改角色成功')
      // 关闭面板
      this.roleDialog = false
      // 更新数据
      this.getEmpList()
    },
    // 显示角色对话框
    async openRole (id) {
      // id 当前点击元素所在行对应的数据的 id
      this.userId = id
      // 得到角色列表数据
      const { rows } = await getRoleListApi()
      this.roleList = rows
      // 获取员工的基本信息中的角色列表
      const { roleIds } = await getUserInfoApi(id)
      this.checkList = roleIds
      this.roleDialog = true
    },
    // 显示二维码
    showCode (imgUrl) {
      this.isVisible = true
      this.$nextTick(() => {
        QrCode.toCanvas(this.$refs.mycanvas, imgUrl, {
          width: 200,
          height: 200
        })
      })
    },
    // 跳转到详情页面
    toDetail (id) {
      this.$router.push(`/employees/detail?id=${id}`)
    },
    // 点击切换页面时，触发方法
    handleCurrentChange (page) {
      this.page.currentPage = page
      // 重新请求数据
      this.getEmpList()
    },
    // 切换分页组件的页容量时，会触发这个方法
    handleSizeChange (size) {
      this.page.pagesize = size
      // 重新请求数据
      this.getEmpList()
    },
    // 得到员工列表
    async getEmpList () {
      const res = await getEmpListApi({
        page: this.page.currentPage,
        size: this.page.pagesize
      })
      // 保存表格数据原
      this.tableData = res.rows
      // 保存总数量
      this.page.total = res.total
    }
  },
  // 打开页面时调用方法
  created () {
    this.getEmpList()
  },
  components: {
    add
  }
}
</script>

<style lang="scss" scoped>
.employees {
  padding: 20px;
  .mycard {
    margin-top: 20px;
    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }
    .staffPhoto {
      width: 50px;
      height: 50px;
      object-fit: contain;
    }
  }
}
</style>
